<template>
  <div class="Footer flex">
    <van-tabbar v-model="active" fixed :route="true">
      <van-tabbar-item v-for="item in arr" :key="item.curInx" :to="item.path">
        <div class="flex">
          <template>
            <img :src="active === item.curInx ? item.img_t : item.img_f" />
          </template>
          <span>{{ item.txt }}</span>
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import home_f from "../../assets/images/Personal/矢量智能对象-2.png";
import home_t from "../../assets/images/Personal/系统功能.png";
import lianxi_f from "../../assets/images/Personal/矢量智能对象 拷贝.png";
import perImg_f from "../../assets/images/Personal/个人中心.png";
import perImg_t from "../../assets/images/Personal/矢量智能对象.png";

export default {
  data() {
    return {
      active: 0,
      home_t,
      home_f,
      lianxi_f,
      perImg_f,
      perImg_t,
      arr: [
        { curInx: 0, txt: "系统功能", img_t: home_t, img_f: home_f, path: "/homes" },
        { curInx: 1, txt: "联系", img_t: lianxi_f, img_f: lianxi_f, path: "/" },
        {
          curInx: 2,
          txt: "个人中心",
          img_t: perImg_t,
          img_f: perImg_f,
          path: "/personal",
        },
      ],
    };
  },
  created() {
    switch (this.$route.path) {
      case "/personal":
        this.active = 2;
        break;
      case "/home":
        this.active = 0;
        break;

      default:
        break;
    }
  },
};
</script>
 
<style lang="less" scoped>
.Footer {
  position: fixed;
  bottom: 0;
  height: 98px;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ccc;
  .van-hairline--top-bottom {
    height: 98px;
    .van-tabbar-item {
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 40px;
        }
      }
    }
  }
}
</style>